<!-- 首页 -->
<template>
  <div class="content">
    <div class="header">
      <!-- <div class="title">SwiftSparrow</div> -->
      <img class="logo" src="../../assets/logo.png" />
    </div>
    <div class="editer">
      <div class="components">
        <editor-components></editor-components>
      </div>
      <div class="drawing-area">
        <div class="canvas">
          <draggable
            :list="choosedComponentsList"
            :group="{ name: 'drag', pull: false, put: true }"
            :sort="false"
            style="width: 100%; height: 100%"
          >
            <template #item="{ element }">
              <div>{{ element.name }}</div>
            </template>
          </draggable>
        </div>
      </div>
      <div class="property"></div>
    </div>
    <div class="footer">
      <span class="copyright">Copyright ©2024 SwiftSparrow</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import EditorComponents from '../../components/editor/components/index.vue'
import { reactive } from 'vue'
import draggable from 'vuedraggable'

const choosedComponentsList: Array<Record<string, any>> = reactive([])
</script>

<style lang="scss" scoped>
.content {
  background-color: #f8f8f8;
  position: relative;
  height: 100%;
  .header {
    background-color: #ddd;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30px;
    display: flex;
    align-items: center;
    .title {
      margin-left: 15px;
      color: #666;
      font-size: 14px;
    }

    .logo {
      margin-left: 15px;
      height: 80%;
    }
  }

  .editer {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 30px;
    display: flex;
    .components {
      flex-grow: 1;
      border-right: 1px dashed #ddd;
    }
    .drawing-area::-webkit-scrollbar {
      width: 0 !important;
    }
    .drawing-area {
      flex-grow: 2;
      display: flex;
      overflow-y: scroll;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;

      .canvas {
        background-color: white;
        width: 375px;
        height: 600px;
      }
    }

    .property {
      flex-grow: 1;
      border-left: 1px dashed #ddd;
    }
  }

  .footer {
    background-color: #ddd;
    position: absolute;
    height: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .copyright {
      color: #bbb;
      font-size: 12px;
    }
  }
}
</style>
